<template>
    <div class="app-container customer-div">
        <div>
          <el-radio-group v-model="listQuery.isHasLocation" size="small" @change="handleSearchList">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="1">有定位</el-radio-button>
            <el-radio-button label="0">无定位</el-radio-button>
          </el-radio-group>
        </div>
        <div style="margin-top: 20px">
            <!--搜索-->
            <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
                <el-form-item label="仓库名称：">
                    <el-input v-model="listQuery.keywords"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            @click="handleSearchList()"
                            type="primary">
                        查询
                    </el-button>
                    <el-button
                            @click="showDialog('add')"
                            type="primary">
                        新增
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
            <el-table
                    v-loading="listLoading"
                    :data="tableData"
                    border
                    style="width: 100%; margin-top: 20px">
                <el-table-column  label="仓库名称"  align="center" prop="orderSn">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.warehouseName}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="所在地区">
                    <template slot-scope="scope">
                        {{scope.row.address}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="详细地址"
                        align="center">
                    <template slot-scope="scope">
                        {{scope.row.addressDetail}}
                    </template>
                </el-table-column>
                <el-table-column
                  label="经纬度"
                  align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.locationLon">
                        {{scope.row.locationLon}}，{{scope.row.locationLat}}
                    </span>

                  </template>
                </el-table-column>
                <el-table-column
                        prop="contactName"
                        label="联系人"
                        align="center">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="联系手机号">
                    <template  slot-scope="scope">
                       {{scope.row.contactMobile}}
                    </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                        label="备注"-->
<!--                        align="center">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{scope.row.remark}}-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column
                        fixed="right"
                        width="100"
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                size="mini"
                                @click="showDialog('edit',scope.row)">编辑
                        </el-button>
                        <el-button
                                type="text"
                                size="mini"
                                @click="delRow(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="listQuery.pageNum"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[10,15,20]"
                    :total="count">
            </el-pagination>
        </div>

        <!--增加仓库-->
        <warehouseInfo ref="warehouseInfo" @getList="handleSearchList"></warehouseInfo>
    </div>
</template>
<script>
    import {warehouseList,warehouseAdd,warehouseEdit,delWarehouse} from '@/api/company'
    import {getAddressList,} from '@/api/partner'
    import {validateCommission} from '@/utils/validate';
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import warehouseInfo from './warehouseInfo.vue'
    import { mapGetters } from 'vuex'
    import scheduling from "./scheduling";
    import limit from "./limit";
    const defaultListQuery={
        pageNum: 1,
        pageSize: 10,
        keywords: '',
        isHasLocation:''
    };

    export default {
        name: "index",
        data(){
            const validatePayAmount = (rule, value, callback) => {
                if (!validateCommission(parseFloat(value))) {
                    callback(new Error('非负整数或小数'))
                } else if(value > this.priceForm.unPaidAmount){
                    callback(new Error('收款金额大于未付金额'))
                }else {
                    callback()
                }
            };
            return {
                listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
                tableData: [],
                count: 0,
                listLoading: false,
                userOptionList:[],
                roles:store.getters.roles ? store.getters.roles : [],
            }
        },
        components : {
          warehouseInfo:warehouseInfo
        },
        computed: {

        },
        created() {
            this.getList();
            this.getAddressListData();
        },
        methods:{
            //删除
            delRow(item){
                this.$confirm('确定删除此仓库?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delWarehouse({warehouseId:item.warehouseId}).then(()=>{
                        this.getList();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //获取省市区列表
            getAddressListData(){
                getAddressList().then((res)=>{
                    this.options = res;
                })
            },
            //显示增加收款弹窗
            showDialog(type,item){
                 this.$refs.warehouseInfo.showDialog(type,item);

            },



            handleSizeChange(val){
                this.listQuery.pageNum = 1;
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val){
                this.listQuery.pageNum = val;
                this.getList();
            },

            handleSearchList(){
                this.listQuery.pageNum = 1;
                this.getList();
            },

            //获取列表
            getList() {
                this.listLoading = true;
                warehouseList(this.listQuery).then(response => {
                    this.tableData = response.list;
                    this.count = response.count;
                    this.listLoading = false;
                }).catch(()=>{
                    this.listLoading = false;
                });
            },

            //去收款单页
            toReceiptList(item){
                localStorage.setItem('accountingListQuery', JSON.stringify(this.listQuery));
                this.$router.push({name:'receiptList',query:{orderSn:item.orderSn}})
            },
        },
    }
</script>

<style scoped lang="scss">
    .upload-div{
        text-align: center;
        position:relative;
        #upload{

            opacity: 0;
            position: absolute;
            z-index: 1;
            width:154px;
            height:40px
        }
    }
</style>
